<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<pre>
			watch监听单个属性：
				基本数据类型：简单监听，
				复杂数据类型：深度监听，
		</pre>
		<div id="app">
			{{values | price}}
			<input type="text" v-model="numbers" />
			<button type="button" @click="handleClick">点击改变dataList</button>
		</div>
		<script src="../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let vm = new Vue({
				el: '#app',
				data(){
					return {
						values: '10',
						numbers: 11,
						dataList: [{name: 'zqf'}, {name: '123'}]
					}
				},
				filters: {
					price(value){
						return value + '￥'
					}
				},
				watch:{
					numbers (newV, oldV){
						if(newV !== oldV){
							console.log(newV)
						}
					},
					//监听复杂数据类型，深度监听，数组和对象
					dataList:{
						deep: true,
						handler(newV, oldV) {
							console.log(newV)
						}
					},
				},
				methods: {
					handleClick() {
						this.dataList[0].name = 'zhangqianfeng'
					},
				},
			})
		</script>
	</body>
</html>
